<template>
  <div class="badaling-container">
    <div class="header">
      <span class="time">{{ currentTime }}</span>
      <h4>{{item.jie1}}</h4>
    </div>
    <div class="image-container">
      <img :src="item.image" alt="全景">
    </div>
    <div class="content">
      <h2 class="jie">介绍</h2>
      <p>
        {{item.title1}}
      </p>
    </div>
    <div class="image-container">
      <img src="../../static/images/旅游2.jpeg" alt="全景">
    </div>
    <div class="content">
      <h2>{{item.jie2}}</h2>
      <div class="info-section">
        <h3 class="jie">最佳观赏位置</h3>
        <p>
          {{item.title2}}
        </p>
      </div>
      <div class="info-section">
        <h3 class="jie">索道介绍</h3>
        <p>
          {{item.title3}}
        </p>
      </div>
      <div class="info-section">
        <h3 class="jie">周边餐饮</h3>
        <p>
          {{item.title4}}
        </p>
      </div>
      <div class="info-section">
        <h3 class="jie">开放时间</h3>
        <p>
          {{item.createTime | format("yyyy-MM-dd")}} ----{{item.updateTime | format("yyyy-MM-dd")}}
        </p>
      </div>
      <div class="info-section">
        <h3 class="jie">优待政策</h3>
        <ul>
          <li>儿童：18岁(不含)以下凭有效证件，免费；学生：18岁(含) - 25岁(含)全日制大学生（不含成教等）凭本人学生证，半价；老人：60周岁（含）以上凭有效证件，免费</li>
          <li>残疾人：凭残疾证（含军残），免费；军人：凭士官证或军官证，免费；离休干部：凭离休证，免费；社会保障金人员：凭有效证件，免费；优惠消防救援人员：凭有效证件，免费；补充说明：60周岁以上老人与6周岁以下未成年人，免费补充说明</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      currentTime: new Date().toLocaleTimeString(),
      item:{},
    };

  },
  methods: {
    findPage(){
      axios.post(`http://localhost:1000/you/findid?strategyId=`+this.$route.query.strategyId).then(res=>{
        this.item=res.data.data;
      })
    },
  },
  filters:{
    format(value,arg){
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }
      return dateFormat(value,arg);
    }
  },
  created() {
    this.findPage();

  }
};
</script>

<style scoped>
.badaling-container {
}

.header {
  margin-top: -10px;
  width: 100%;
  height: 30px;
}

.image-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.image-container img {
  width: 100%;
  height: auto;
}

.content {
  margin-top: -10px;
  background-color: #fdfdfd;
}
.jie{
  margin-left: -300px;
  font-size: 15px;
}
.info-section {
}
.time {
  font-size: 10px;
  position: absolute;
  top: 15px;
  left: 15px;
  right: auto;
}
</style>